<template>
	<view class="shopList">
		<view class="banner">
			<img src="/static/images/order/Rectangle.png" alt="">
			<text class="preferential">
				限时特惠：59分钟59秒
			</text>
		</view>
		<view class="context">
			<view class="title">
				{{dataList.name}}
			</view>
			<view class="vip">
				<text class="vipjd">会员价:</text>
				<text class="vipJf">{{dataList.jf}}</text>
				+
				<text>{{dataList.hyj}}</text>
			</view>
			<view class="">
				<text>原价:</text>
				<text>{{dataList.yj}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				dataList:{
						xsth:'59分59秒',
						name:'橙皮精油农药助剂厂橙皮精油农药助剂厂橙皮精油农药助剂厂',
						hyj:'280',
						jf:'12',
						yj:'2800积分+￥2800',
					}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shopList{
		width: 326rpx;
		background-color: #fff;
		border-radius: 35rpx;
		padding-bottom: 10rpx;
		.banner{
			position: relative;
			img{
				width: 326.3rpx;
				height: 326.3rpx;
				opacity: 1;
				border-radius: 17.43rpx 17.43rpx, 0rpx, 0rpx;
			}
			.preferential{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 326rpx;
				height: 48rpx;
				opacity: 1;
				background: linear-gradient(90deg, #FF1D47 0%, #FE3D1A 100%);
				color: #fff;
				text-align: center;
			}
		}
		.context{
			padding: 0 20rpx;
			font-size: 18rpx;
			.title{
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
				white-space: nowrap;
				font-size: 27rpx;
				font-weight: 600;
				color: #333333;
			}
			.vip{
				margin: 10rpx 0;
				.vipjd{
					color: #FE4D4F;
				}
				.vipJf{
					font-size: 34.86rpx;
					font-weight: 700;
					color: #FE4D4F;
				}
			}
		}
	}
</style>